<!-- 交房管理 -->
<template>
  <div class='delivery_management'>
    <div>
      <Tabs type="card" v-model="showTab" :animated="false" @on-click="changeTabFun()">
        <TabPane label="可交房" name="ABLE">
        </TabPane>
        <TabPane label="已交房" name="HANDOVER">
        </TabPane>
        <TabPane label="作废记录" name="INVALID">
        </TabPane>
      </Tabs>
    </div>

    <dt-search ref="search" :labelWidth="100" v-show="showStatus" @reset="resetFun">
      <Button type="primary" :disabled="total==0" @click="exportTable(0)"
        v-if="unlocking('0104050300')" style="margin-right:8px;">导出</Button>
      <Button type="primary" :disabled="total==0" @click="exportTable(1)"
        v-if="unlocking('0104050600')">全号导出</Button>
      <Button type="primary" @click="operationClick"
        v-if="unlocking('0104050700')">查看导出记录</Button>
    </dt-search>
    <Row :gutter="16">
      <Col span="6">
      <div class="plan_total_num">
        共{{total}}个计划
      </div>
      </Col>
      <Col span="18">
      <Row type="flex" justify="end">
        <Button type="default" @click="changeShow()">{{showStatusTxt}}</Button>
        <Button type="success" class="delivery_management_btn" @click="importLogBtn()"
          v-if="unlocking('0104050500') && showTab=='HANDOVER'">导入日志</Button>
        <Button type="success" class="delivery_management_btn" @click="contractBtn(1)"
          v-if="unlocking('0104050100') && showTab=='HANDOVER'">导入合同</Button>
        <Button type="primary" class="delivery_management_btn" @click="contractBtn(2)"
          v-if="unlocking('0104050200') && showTab=='ABLE'">批量交房</Button>
        <Button type="primary" class="delivery_management_btn" @click="contractBtn(2)"
          v-if="unlocking('0104050200') && showTab=='HANDOVER'">批量修改</Button>
        <Button type="primary" style="margin-left:10px;"> <a
            href="https://images.tospurfang.com/doc/%E4%BA%A4%E6%88%BF%E7%AE%A1%E7%90%86%E6%93%8D%E4%BD%9C%E8%AF%B4%E6%98%8E.pdf"
            style="color:#fff;" target="_blank">查看操作指引</a>
        </Button>
      </Row>
      </Col>
    </Row>
    <dt-grid ref="table" :page="page" :onFetch='onFetch' />
    <!-- 导入日志 -->
    <Modal v-model="importLogModalflag" title="导入日志" @on-cancel="AllModalCancel" width="600px"
      :footerHide="true">
      <import-log v-if="importLogModalflag" @onClose='AllModalCancel' />
    </Modal>
    <!-- 导入合同 -->
    <Modal v-model="contractModalflag" title="导入合同信息" @on-cancel="AllModalCancel" width="600px"
      :footerHide="true">
      <contract-modal v-if="contractModalflag" @onClose='AllModalCancel'
        @onSearch='onSuccess' />
    </Modal>
    <!-- 批量交房 -->
    <Modal v-model="contractModalflag2" title="批量交房" @on-cancel="AllModalCancel" width="600px"
      :footerHide="true">
      <delivery-modal @onClose='AllModalCancel' @onSearch='onSuccess' />
    </Modal>
    <!--交房管理-->
    <delivery-operate ref="deliveryOperate" @onGetOrderDetail="onSuccess">
    </delivery-operate>
    <!-- 客户详情 -->
    <Modal v-model="detailsFlag" title="客户详情" width="80%" :styles="{top:'5%'}"
      :footer-hide="true">
      <detail-page v-if="detailsFlag" :detailsParams="detailsParams"></detail-page>
    </Modal>
    <!--导出记录-->
    <operation-record ref="operationRecord"></operation-record>
  </div>
</template>

<script>
  import contractModal from './component/contractModal.vue'
  import deliveryModal from './component/deliveryModal.vue'
  import deliveryOperate from '../components/deliveryOperate.vue'
  import importLog from './component/importLog.vue'
  import detailPage from '@/views/casemanagement/allCustomersManagement/details.vue'
  import deliveryMgr from '@/biz/delivery/control'
  import searchOpt from './opt/search'
  import column from './column'
  import dt from '@dt/dt'
  export default {
    components: {
      importLog,
      contractModal,
      deliveryModal,
      deliveryOperate,
      detailPage,
    },
    data() {
      return {
        showTab: 'ABLE',
        total: 0,
        searchInfo: {
          status: '',
          handoverCode: '',
          receiptType: '',
          receiptNumber: '',
          contractCode: '',
          productIds: [], //产品
          buildingIds: [],
          unitIds: [],
        },
        page: {
          current: 1,
        },
        importLogModalflag: false,
        contractModalflag: false,
        contractModalflag2: false,
        filterParams: {},
        detailsFlag: false,
        showStatus: true,
        showStatusTxt: '收起筛选',
      }
    },
    watch: {},
    methods: {
      // 导出记录
      operationClick() {
        let logType = this.showTab == 'ABLE' ? 'M_20' : this.showTab == 'HANDOVER' ? 'M_21' :
          'M_22'
        this.$refs.operationRecord.show('export_delivery', logType, this.$dt
          .buildInfo().housesId)
      },
      resetFun() {
      },
      changeTabFun() {
        this.$refs.table.update(new column(this))
        // this.$refs.search.update(searchOpt.options(this))
        this.$refs.table.fetch(true)
      },

      changeShow() {
        this.showStatus = !this.showStatus
        this.showStatusTxt = this.showStatus ? '收起筛选' : '展开筛选'
        this.$refs.table.fixHeight()
      },

      onFetch(data) {
        data.housesId = this.$dt.buildInfo().housesId
        
        let params = {
          ...data,
          tabType: this.showTab
        }
        this.filterParams = {
          ...params
        }
        return deliveryMgr.deliveryListInfos(params).then((res) => {
          if (res) {
            this.total = res.total
            return res
          }
        }).catch(err => {
          this.total = 0
        })
      },
      //导出
      exportTable(exportType) {
        let params = this.filterParams
        params.exportType = exportType
        deliveryMgr.exportHandoverList(params)
      },
      AllModalCancel() {
        this.importLogModalflag = false
        this.contractModalflag = false
        this.contractModalflag2 = false
      },
      // 保留列表查询参数
      retainParamsFun() {
        let params = Object.assign({
          filter: this.$refs.table.throwFilter().export(),
          showTab: this.showTab
        }, this.filterParams)
        dt.memory.set('delivery_params', params)
      },
      // 客户姓名链接到客户资料
      onLinkUser(row) {
        if (row.customerName == '-') {
          return false
        }
        this.detailsFlag = true
        this.detailsParams = {
          customerId: row.customerId,
          userCustomerId: row.userCustomerId,
          buildingId: this.$dt.buildInfo().housesId,
          userId: row.userId,
          cityCode: this.$dt.buildInfo().cityId,
        }
      },
      //查看
      viewFun(row) {
        if (!this.unlocking('0104030300')) {
          return false
        } else {
          this.retainParamsFun()
          this.$router.push({
            name: 'contractDetail',
            query: {
              examineBtn: false,
              showTab: 'orderDetail',
              orderStatusName: '签约',
              orderNum: row.contractCode, // 单号
              businessId: row.contractId, // 业务id
              subscriptionId: row.subscriptionId, //认购ID
            },
          })
        }
      },
      //单个交房
      deliverAHouseFun(row) {
        this.$refs.deliveryOperate.show(row.contractId)
      },
      // 修改
      editDeliverAHouseFun(row) {
        this.retainParamsFun()
        dt.memory.set('showDeliveryModal', true)
        this.$router.push({
          name: 'contractDetail',
          query: {
            examineBtn: false,
            showTab: 'orderDetail',
            orderStatusName: '签约',
            orderNum: row.contractCode, // 单号
            businessId: row.contractId, // 业务id
            subscriptionId: row.subscriptionId, //认购ID
          },
          params: {
            showDeliveryModal: true
          }
        })
      },
      //导入
      contractBtn(type) {
        if (type == 1) {
          this.contractModalflag = true
        } else if (type == 2) {
          this.contractModalflag2 = true
        }
      },
      importLogBtn() {
        this.importLogModalflag = true
      },
      onSuccess() {
        this.$refs.table.fetch()
      },
    },
    beforeRouteEnter(to, from, next) {
      if (from.name != 'contractDetail') dt.memory.remove('delivery_params')
      next()
    },
    created() {},
    mounted() {
      let _this = this
      let retainParams = dt.memory.get('delivery_params')
      this.showTab = retainParams ? retainParams.showTab : 'ABLE'

      this.$refs.table.init(this, new column(this), { ...retainParams })
      this.$refs.search.init(this.$refs.table, searchOpt.options(this), this
        .searchInfo)
      if (retainParams) {
        Object.keys(this.searchInfo).map(function(key) {
          retainParams[key] && (_this.searchInfo[key] = retainParams[key]) //比较key
        })
        retainParams.rows && (this.page.rows = retainParams.rows)
        retainParams.page && (this.page.current = retainParams.page)
      }
      this.$nextTick(function() {
        if (retainParams) {
          retainParams.filter && _this.$refs.table.throwFilter().import(retainParams
            .filter)
        }
      })

      this.$refs.table.fetch()
    },
  }
</script>
<style lang='scss' scoped>
  .delivery_management {
    padding: 20px;

    .plan_total_num {
      padding-left: 8px;
      font-size: 16px;
    }

    .delivery_management_btn {
      width: 100px;
      margin-left: 10px;
    }

    .export_btn {
      margin-left: 120px;
    }

    .tab {
      margin-top: 15px;
    }
  }
</style>